<template>
  <div>
    <h1>shallowReadonly的使用</h1>
    <h2>{{ mm }}</h2>
    <button @click="change">change</button>
  </div>
</template>

<script setup>
import { shallowReadonly, reactive } from "vue";

// shallowReadonly只有第1层是只读的
// 第一层：a  d
// 第二层：b
// 第三层：c
const mm = shallowReadonly(reactive({ a: { b: { c: 1 } }, d: 2 }));

const change = () => {
  // mm.d++; // 不能操作d, 因为d是只读的
  mm.a.b.c++; // c不是只读的
};
</script>

<style lang="scss" scoped>
</style>